#{extends 'main.html' /}
#{set title:'Borrow Book' /}

#{form @BookActions.doBorrow()}
    <input type="text" id="user" name="user" class="ui-autocomplete-input"/>
    <input type="hidden" id="username" />
#{/form}

<script type="text/javascript" >
     
    $(function() {
        $( "#user" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "@{Users.filterJson()}",
                    dataType: "json",
                    data: {
                        limit: 12,
                        q: request.term
                    },
                    success: function( data ) {
                        response( $.map( data, function( item ) {
                            return {
                                label: item.lastName +" "+ item.firstName +" ("+ item.username+")",
                                value: item.username,
                                username: item.username
                            }
                        }));
                    }
                });
            },
            minLength: 1,
            select: function( event, ui ) {
                console.log(ui);
                $('#username').val(ui.item.username);
            },
            open: function() {
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });
    });
</script>